<!DOCTYPE html>
<html class="uk-height-1-1">
<head>
    <meta charset="utf-8" />
    <title>登录 - Awesome Python Webapp</title>
    <link rel="stylesheet" href="/static/css/uikit.min.css">
    <link rel="stylesheet" href="/static/css/uikit.gradient.min.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/sha1.min.js"></script>
    <script src="/static/js/uikit.min.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/awesome.js"></script>
    <script>
$(function() {
    var vmAuth = new Vue({
        el: '#vm', //查找id=vm的dom
        data: { //设置默认的数据
            email: '',
            passwd: ''
        }, 
        //这里根据需求设置多个函数
        methods: {
            submit: function(event) { //函数名 submit
                event.preventDefault();
                var
                    $form = $('#vm'),
                    email = this.email.trim().toLowerCase(),
                    data = {
                        email: email,
                        passwd: this.passwd==='' ? '' : CryptoJS.SHA1(email + ':' + this.passwd).toString()
                    };
                $form.postJSON('/api/authenticate', data, function(err, result) {
                    if (! err) {
                        location.assign('/');
                    }
                });
            }
        }
    });
});
    </script>
</head>
<body class="uk-height-1-1">
    <div class="uk-vertical-align uk-text-center uk-height-1-1">
        <div class="uk-vertical-align-middle" style="width: 320px">
            <p><a href="/" class="uk-icon-button"><i class="uk-icon-html5"></i></a> <a href="/">Awesome Python Webapp</a></p>
            <form id="vm" v-on="submit: submit" class="uk-panel uk-panel-box uk-form">
                <div class="uk-alert uk-alert-danger uk-hidden"></div>
                <div class="uk-form-row">
                    <div class="uk-form-icon uk-width-1-1">
                        <i class="uk-icon-envelope-o"></i>
                        <!-- v-model = email 这里是把view和model关联起来,model数据的data.email-->
                        <input v-model="email" name="email" type="text" placeholder="电子邮件" maxlength="50" class="uk-width-1-1 uk-form-large">
                    </div>
                </div>
                <div class="uk-form-row">
                    <div class="uk-form-icon uk-width-1-1">
                        <i class="uk-icon-lock"></i>
                        <input v-model="passwd" name="passwd" type="password" placeholder="口令" maxlength="50" class="uk-width-1-1 uk-form-large">
                    </div>
                </div>
                <div class="uk-form-row">
                    <button type="submit" class="uk-width-1-1 uk-button uk-button-primary uk-button-large"><i class="uk-icon-sign-in"></i> 登录</button>
                </div>     
                <div class="uk-form-row">
                    <a href="/"><button type="button" class="uk-width-1-1 uk-button uk-button-primary uk-button-large"><i class="uk-icon-home"></i> 首页</button></a>
                </div>
            </form>
            
        </div>
    </div>
</body>
</html>